<template>
  <div class="app-container">

    <div class="waterFactory" v-for="(item,index) in grade1Array" style="display: inline-block;margin-left: 20px;margin-top: 20px">
      <p class="waterFactoryName">
        <span>{{item.deviceName}}</span>
        <el-button type="text" style="float: right" @click="belong(item.id)">下属设备</el-button>
      </p>
      <img :src="item.url" style="width: 100px;height: 100px;margin-left: 143px;">
      <div style="margin-left: 20px;height: 200px;overflow-y: scroll;">
        <p>
          <span class="title">经度：</span>
          <span class="data">{{item.longitude}}</span>
        </p>
        <p>
        <span class="title">纬度：</span>
        <span class="data">{{item.latitude}}</span>
        </p>
        <p v-for="item2 in grade1DataArray[index]">
          <span class="title">{{item2.key}}: </span>
          <span class="data">{{item2.data}} </span>
          <span class="data">{{item2.unit}}</span>
        </p>
      </div>
    </div>


  </div>
</template>
<script>
    import {grade1,plcData,plcRealTime,childList,childListData} from '@/api/operationMonitoring'
    import {getListType} from '@/api/equipmentTypeManagement'
    export default {
        name: "roleManagement",

        data() {
            return {
                dialogArray:[],
                dialogVisible: false,
                activeName:"first",
                waterFactoryImg:"",
                grade1Array:[],
                grade1DataArray:[],
                grade1Data:[],
            };
        },
        computed: {

        },
        methods: {
            belong(id){
                // childListData(id).then(res=>{
                //     console.log(res,'childData')
                // })
                sessionStorage.setItem('parent',id)
                this.$router.push({path:"/operationMonitoring/tableInside"})
            },
            async initData() {
                let page={
                    pageNum: 1,
                    pageSize: 1000,
                }
                let typeRes= await getListType(page)
                let grade1Res= await grade1()
              this.grade1Array=grade1Res.data
              console.log(this.grade1Array)
              for(let item of this.grade1Array){
                    if(item.typeId==1){
                        item.url=typeRes.data.resultList[0].img
                    }
                    if(item.typeId==2){
                        item.url=typeRes.data.resultList[1].img
                    }
                    if(item.typeId==3){
                        item.url=typeRes.data.resultList[2].img
                    }
                }
                this.getData()
            },
            async getData() {
              for(let item of this.grade1Array){
                let array=[]
                let data= await plcRealTime(item.id)
                for(let key in data.data){
                  array.push({
                    key:data.data[key].name,
                    data:data.data[key].value,
                    unit:data.data[key].unit,
                  })
                }
                this.grade1DataArray.push(array)
              }
              console.log(this.grade1DataArray)
            },
        },
        mounted() {
            this.initData()

        },
        created() {
        },
    };
</script>

<style lang="scss">
  .waterFactory{
    width: 390px;
    height: 390px;
    -webkit-box-shadow: #666 0px 0px 10px;
    -moz-box-shadow: #666 0px 0px 10px;
    box-shadow: #666 0px 0px 10px;
    .waterFactoryName{
      border-width: 0 0 1px 0;
      border-style: solid;
      border-color: gray;
      height: 50px;
      .el-button{
        padding: 0px 20px;
      }
      span{
        line-height: 50px;
        display: inline-block;
        margin-left: 20px;
        font-size: 18px;
      }
    }
    .title{
      color: #409EFF;
    }
    .data{
      color: #003399;
    }
  }

</style>
